{% extends 'products/base.html' %}
{% load static %}

{% block css %}
  <link href="{% static '/css/products.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
  <!-- Page Content -->
  <div class="container">

      <div class="row">

          <div class="col-lg-3">

              <h1 class="my-4">Store</h1>
              <div class="list-group">
                {% for category in categories %}
                  <a href="{% url 'products:category' category.id %}" class="list-group-item">
                    {{ category.name }}
                  </a>
                {% endfor %}
              </div>

          </div>
          <!-- /.col-lg-3 -->

          <div class="col-lg-9">

              <div id="carouselExampleIndicators" class="carousel slide my-4" data-ride="carousel">
                  <ol class="carousel-indicators">
                      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                  </ol>
                  <div class="carousel-inner" role="listbox">
                      <div class="carousel-item active">
                          <img class="d-block img-fluid" src="{% static '/vendor/img/slides/slide-1.jpg' %}" alt="First slide">
                      </div>
                      <div class="carousel-item">
                          <img class="d-block img-fluid" src="{% static '/vendor/img/slides/slide-2.jpg' %}" alt="Second slide">
                      </div>
                      <div class="carousel-item">
                          <img class="d-block img-fluid" src="{% static '/vendor/img/slides/slide-3.jpg' %}" alt="Third slide">
                      </div>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="sr-only">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                  </a>
              </div>

              <div class="row">
                {% for product in products %}
                  <div class="col-lg-4 col-md-6 mb-4">
                      <div class="card h-100">
                          <a href="#">
                              <img class="card-img-top"
                                   src="/media/{{ product.image }}"
                                   alt="">
                          </a>
                          <div class="card-body">
                              <h4 class="card-title">
                                  <a href="#">{{ product.name }}</a>
                              </h4>
                              <h5>{{ product.price }} руб.</h5>
                              <p class="card-text">{{ product.short_description }}</p>
                          </div>
                          <div class="card-footer text-center">
                            <a href="{% url 'products:basket_add' product.id %}">
                              <button type="button" class="btn btn-outline-success">
                                Отправить в корзину
                              </button>
                            </a>
                          </div>
                      </div>
                  </div>
                {% endfor %}

              </div>

              <nav aria-label="Page navigation example">
                  <ul class="pagination justify-content-center">
                      <li class="page-item {% if not products.has_previous %} disabled {% endif %}">
                          <a class="page-link"
                             href="{% if products.has_previous %} {% url 'products:page' products.previous_page_number %} {% else %} # {% endif %}"
                             tabindex="-1"
                             aria-disabled="true">
                            Предыдущая
                          </a>
                      </li>
                      {% for page in products.paginator.page_range %}
                        <li class="page-item">
                          <a class="page-link" href="{% url 'products:page' page %}">
                            {{ page }}
                          </a>
                        </li>
                      {% endfor %}
                      <li class="page-item {% if not products.has_next %} disabled {% endif %}">
                          <a class="page-link"
                             href="{% if products.has_next %} {% url 'products:page' products.next_page_number %} {% else %} # {% endif %}">
                            Следующая
                          </a>
                      </li>
                  </ul>
              </nav>

          </div>

      </div>

  </div>
  <!-- /.container -->
{% endblock %}

{% block footer %}
  <footer class="py-5 bg-dark">
      <div class="container">
          <p class="m-0 text-center text-white">Copyright &copy; Store 2021</p>
      </div>
      <!-- /.container -->
  </footer>
{% endblock %}
